<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

    <form>
       <input type="button" onclick="getLocation();" value="Get Location"/>
    </form>
    <script type="text/javascript">
        function showLocation(position) {
            var coords = position.coords;

            console.log('latitude: ' + coords.latitude);
            console.log('longitude: ' + coords.longitude);
            console.log('altitude: ' + coords.altitude);
            console.log('heading: ' + coords.heading);
            console.log('speed: ' + coords.speed);
        }
/*
latitude: 36.204823999999995
geolocation.html:19 longitude: 138.252924


latitude: 36.204823999999995
geolocation.html:19 longitude: 138.252924

*/
        function errorHandler(err) {
            if(err.code == 1) {
                alert('Error:Access is denied!');
            } else if(err.code == 2) {
                alert('Error:Postion is unvailable!');
            }
        }

        function getLocation() {
            if(navigator.geolocation) {
                var options = {timeout: 60000};
                navigator.geolocation.getCurrentPosition(showLocation, errorHandler, options);
            } else {
                alert('Sorry, browser does not support geolocation!');
            }
        }
    </script>
</body>
</html>
